<template>
	<view class="theme_bg_vice_color">
		<cu-custom :isBack="true" :backColor="'text-black'">
			<block slot="backText"><view class="text-black ">店铺入驻</view></block>
		</cu-custom>
		<view class=" padding">
			<view class="cu-steps">
				<view class="cu-item" :class="index > num ? '' : 'text-green'" v-for="(item, index) in numList" :key="index">
					<text class="num" :class="index == 3 ? 'err' : ''" :data-index="index + 1"></text>
					{{ item.name }}
				</view>
			</view>
		</view>
		<view v-show="num == 0">
			<van-cell-group>
				<van-field
					type="textarea"
					size="large"
					autosize
					:value="shopName"
					@input="shopName = $event.detail"
					label="店铺名称"
					placeholder="店铺招牌上的名称,长度1-10个字"
					required
					maxlength="10"
				/>
				<van-field :value="phone" @input="phone = $event.detail" size="large" label="联系电话" placeholder="可联系店铺的手机号或座机" required :border="false" />
				<van-field :value="code" @input="code = $event.detail" size="large" label="验证码" placeholder="验证码" required :border="false">
					<van-button slot="button" size="small" type="primary" @click="smsStatus === 0 ? sms(phone) : $textToast(smsStatus + 's后再试')">
						{{ smsStatus == 0 ? '发送验证码' : smsStatus + 's' }}
					</van-button>
				</van-field>
				<van-field :value="weixin" @input="weixin = $event.detail" size="large" label="联系微信号" placeholder="可联系店铺的微信号" required :border="false" />
				<view class="" @click="show = true">
					<van-field
						:value="Location"
						size="large"
						readonly
						label="省市区"
						placeholder="请选择省市区"
						required
						is-link
						:border="false"
						:arrow-direction="show ? 'down' : ''"
					/>
				</view>
				<view @click="getLocation">
					<van-field :value="address" readonly size="large" label="具体地址" placeholder="请先选择具体地址" is-link required :border="false" />
				</view>
				<van-field :value="address1" @input="address1 = $event.detail" size="large" label="街道门牌号" placeholder="填写具体街道门牌号" required :border="false" />
				<view class="cu-bar bg-white margin-top">
					<view class="action">
						<text class="text-red">*</text>
						营业执照上传
					</view>
					<view class="action"><!-- {{imgList.length}}/1 --></view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" @click="ViewImage" :data-url="$isHttp(yyzz)" v-if="yyzz != ''">
							<image :src="$isHttp(yyzz)" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @click.stop="DelImg" :data-index="1"><text class="cuIcon-close"></text></view>
						</view>
						<view class="solids" @click="ChooseImage(1)" v-if="yyzz == ''"><text class="cuIcon-cameraadd"></text></view>
					</view>
				</view>
				<view class="cu-bar bg-white margin-top">
					<view class="action">
						<text class="text-red">*</text>
						店铺logo
					</view>
					<view class="action"><!-- {{logoimgList.length}}/1 --></view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" @click="ViewImage" :data-url="$isHttp(logo)" v-if="logo != ''">
							<image :src="$isHttp(logo)" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @click.stop="DelImg" :data-index="0"><text class="cuIcon-close"></text></view>
						</view>
						<view class="solids" @click="ChooseImage(0)" v-if="logo == ''"><text class="cuIcon-cameraadd"></text></view>
					</view>
				</view>
				<view class="cu-bar bg-white margin-top">
					<view class="action">
						<text class="text-red">*</text>
						身份证正面
					</view>
					<view class="action"><!-- {{logoimgList.length}}/1 --></view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" @click="ViewImage" :data-url="$isHttp(IDCard1)" v-if="IDCard1 != ''">
							<image :src="$isHttp(IDCard1)" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @click.stop="DelImg" :data-index="2" :data-delindex="1"><text class="cuIcon-close"></text></view>
						</view>
						<view class="solids" @click="ChooseImage(2, 1)" v-if="IDCard1 == ''"><text class="cuIcon-cameraadd"></text></view>
					</view>
				</view>
				<view class="cu-bar bg-white margin-top">
					<view class="action">
						<text class="text-red">*</text>
						身份证反面
					</view>
					<view class="action"><!-- {{logoimgList.length}}/1 --></view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" @click="ViewImage" :data-url="$isHttp(IDCard2)" v-if="IDCard2 != ''">
							<image :src="$isHttp(IDCard2)" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @click.stop="DelImg" :data-index="2" :data-delindex="2"><text class="cuIcon-close"></text></view>
						</view>
						<view class="solids" @click="ChooseImage(2, 2)" v-if="IDCard2 == ''"><text class="cuIcon-cameraadd"></text></view>
					</view>
				</view>
			</van-cell-group>

			<view class="padding-xl"><button @click="submit" class="cu-btn block bg-black margin-tb-sm lg">提交申请</button></view>
		</view>

		<view v-show="num == 1" class="text-center" style="height: 100vh;">
			<viwe class="text-bold padding-lg">
				添加客服微信
				<br />
				可尽快确认审核情况及其他信息
			</viwe>
			<br />
			<view v-for="(item, index) in CustomerList" :key="index">
				<viwe>微信号：{{ item.contactInfo }}</viwe>
				<br />
				<view class="cu-btn round bg-cyan" @click="$copy(item.contactInfo)">点击复制</view>
				<viwe><image style="width: 200rpx;height: 200rpx;" :src="$isHttp(item.ewmImg)" mode=""></image></viwe>
				<view class="cu-btn round bg-cyan" @click="$downloadFile($isHttp(item.ewmImg))">点击保存</view>
				<br />
			</view>
			<viwe>
				客服将在两个工作日内处理您的入驻
				<br />
				请耐心等待~
			</viwe>
			<br />
			<!-- <view class="cu-btn round bg-cyan">返回首页</view> -->
		</view>

		<view v-show="num == 2" class="text-center" style="height: 100vh;">
			<view class="text-xl text-green">入驻成功</view>
			<view class="margin-top-sm">
				店铺名：
				<text class="text-bold">{{ dataObj.storeName }}</text>
			</view>
			<view class="flex justify-center margin-top-sm align-center">
				<view class="">pc后台登录地址:</view>
				<view class="text-green text-cut" style="width: 300rpx;">https://api.51cjj.com/jumeng_admin/</view>
				<view class="cu-btn round sm bg-green margin-left-sm" @click="$copy('https://api.51cjj.com/jumeng_admin/')">点击复制</view>
			</view>
			<view class="flex justify-center margin-top-sm align-center">
				<view class="">pc后台登录账号:</view>
				<view class="text-green">{{ dataObj.username }}</view>
				<view class="cu-btn round sm bg-green margin-left-sm" @click="$copy(dataObj.username)">点击复制</view>
			</view>
			<view class="flex justify-center margin-top-sm align-center">
				<view class="">pc后台登录密码:</view>
				<view class="text-green">{{ dataObj.password }}</view>
				<view class="cu-btn round sm bg-green margin-left-sm" @click="$copy(dataObj.password)">点击复制</view>
			</view>

			<view class="margin-top-xl padding-lr-lg">
				<button type="primary" :disabled="false" @click="$goPage('/pageBusinessAdmin/index/index?id=' + dataObj.storeId)">进入商家后台管理</button>
			</view>
		</view>

		<van-popup :show="show" position="bottom" round close-on-click-overlay><van-area :area-list="areaList" @confirm="areaConfirm" @cancel="show = false" /></van-popup>
	</view>
</template>

<script>
import area from '../../common/area.js';
import { baseUrl } from '../../initial.js';
import { validate, string, util, isValid } from 'valid.js';
export default {
	data() {
		return {
			show: false,
			numList: [
				{
					name: '填写店铺信息'
				},
				{
					name: '添加运营微信'
				},
				{
					name: '审核通过展示'
				}
			],
			num: 0,
			areaList: area,
			smsStatus: 0,
			timer1:null,

			//num==0
			shopName: '',
			phone: '',
			code: '',
			weixin: '',
			Location: '',
			province: '',
			city: '',
			area: '',
			address: '',
			address1: '',
			latitude: '', //经度
			longitude: '', //纬度
			// imgList: [],
			// logoimgList:[],
			yyzz: '',
			logo: '',
			IDCard1: '',
			IDCard2: '',

			//num==1
			CustomerList: [],
			//num==2
			dataObj: ''
		};
	},
	onLoad() {
		this.$u.api
			.getUserIsbussiness({
				userId: this.vuex_user.id ? this.vuex_user.id : ''
			})
			.then(res => {
				if (res.data.store_state == -1) {
					this.num = 0;
				} else if (res.data.store_state == 0) {
					this.num = 1;
				} else if (res.data.store_state == 1) {
					this.num = 2;
					this.dataObj = res.data;
				}
				this.$u.api.getCustomerInfo().then(res => {
					this.CustomerList = res.data;
				});
			});
	},
	methods: {
		areaConfirm(e) {
			this.show = false;
			this.Location = e.detail.values[0].name + e.detail.values[1].name + e.detail.values[2].name;
			console.log(this.Location);
			this.province = e.detail.values[0].name;
			this.city = e.detail.values[1].name;
			this.area = e.detail.values[2].name;
		},
		getLocation() {
			let _this = this;
			uni.chooseLocation({
				success: function(res) {
					_this.address = res.name;
					// console.log('位置名称：' + res.name);
					// console.log('详细地址：' + res.address);
					console.log('纬度：' + res.latitude);
					console.log('经度：' + res.longitude);
					_this.latitude = res.latitude;
					_this.longitude = res.longitude;
				}
			});
		},
		ChooseImage(index, i) {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册选择
				success: res => {
					uni.uploadFile({
						url: baseUrl + '/store/upload', //仅为示例，非真实的接口地址
						filePath: res.tempFilePaths[0],
						name: 'file',
						header: {
							Authorization: 'Bearer ' + this.vuex_token
						},
						formData: {
							select: index
						},
						success: uploadFileRes => {
							if (JSON.parse(uploadFileRes.data).code === 200) {
								switch (index) {
									case 0:
										this.logo = JSON.parse(uploadFileRes.data).data;
										break;
									case 1:
										this.yyzz = JSON.parse(uploadFileRes.data).data;
										break;
									case 2:
										if (i == 1) {
											this.IDCard1 = JSON.parse(uploadFileRes.data).data;
										} else {
											this.IDCard2 = JSON.parse(uploadFileRes.data).data;
										}
										break;
									case 3:
										// 代码块
										break;
									case 4:
										// 代码块
										break;
									case 5:
										this.bgm = JSON.parse(uploadFileRes.data).data;
										break;
									default:
									// 默认代码块
								}
							} else {
								this.$textToast(JSON.parse(uploadFileRes.data).message);
							}
						}
					});
				}
			});
		},
		ViewImage(e) {
			uni.previewImage({
				urls: this.imgList,
				current: e.currentTarget.dataset.url
			});
		},
		DelImg(e) {
			uni.showModal({
				title: '',
				content: '确定要删除吗？',
				cancelText: '取消',
				confirmText: '确定',
				success: res => {
					if (res.confirm) {
						switch (e.currentTarget.dataset.index) {
							case 0:
								this.logo = '';
								break;
							case 1:
								this.yyzz = '';
								break;
							case 2:
								if (e.currentTarget.dataset.delindex == 1) {
									this.IDCard1 = ''
								} else {
									this.IDCard2 = ''
								}
								break;
							case 3:
								// 代码块
								break;
							case 4:
								// 代码块
								break;
							case 5:
								// this.bgm = ''
								break;
							default:
							// 默认代码块
						}
					}
				}
			});
		},
		submit() {
			if (!isValid(this.shopName, [string.length(1, 10), util.isRequired])) {
				this.$textToast('店铺名称不符合要求');
				return;
			}
			if (!this.checkTel(this.phone)) {
				this.$textToast('电话号码不合法');
				return;
			}
			if (!isValid(this.weixin, [util.isRequired])) {
				this.$textToast('微信号必填');
				return;
			}
			if (!isValid(this.province, [util.isRequired])) {
				this.$textToast('请选择省市区');
				return;
			}
			if (!isValid(this.address, [util.isRequired])) {
				this.$textToast('请选择具体地址');
				return;
			}
			if (!isValid(this.address1, [util.isRequired])) {
				this.$textToast('请填写街道门牌号');
				return;
			}
			if (!isValid(this.yyzz, [util.isRequired])) {
				this.$textToast('请上传营业执照');
				return;
			}
			if (!isValid(this.logo, [util.isRequired])) {
				this.$textToast('请上传店铺Logo');
				return;
			}
			if (!isValid(this.IDCard1, [util.isRequired])) {
				this.$textToast('请上传法人身份证正面');
				return;
			}
			if (!isValid(this.IDCard2, [util.isRequired])) {
				this.$textToast('请上传法人身份证反面');
				return;
			}
			this.$u.api
				.SstoreApply({
					user_id: this.vuex_user.id,
					store_name: this.shopName,
					licenseImgUrl: this.yyzz,
					telephone: this.phone,
					wechat_number: this.weixin,
					province: this.province,
					city: this.city,
					region: this.area,
					address: this.address + this.address1,
					latitude: this.latitude,
					longitude: this.longitude,
					picture: this.logo,
					code:this.code,
					IDCard1: this.IDCard1,
					IDCard2: this.IDCard2,
				})
				.then(res => {
					if (res.code === 200) {
						this.num += 1;
					}
				});
		},
		checkTel(value) {
			var isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
			var isMob = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
			if (isMob.test(value) || isPhone.test(value)) {
				return true;
			} else {
				return false;
			}
		},
		sms(phone) {
			this.$u.adminApi
				.sms({
					number: phone,
					select:1
				})
				.then(res => {
					if (res.code === 200) {
						const TIME_COUNT = 60;
						if (!this.timer1) {
							this.smsStatus = TIME_COUNT;
							this.timer1 = setInterval(() => {
								if (this.smsStatus > 0 && this.smsStatus <= TIME_COUNT) {
									this.smsStatus--;
								} else {
									clearInterval(this.timer1);
									this.timer1 = null;
								}
							}, 1000);
						}

						this.$textToast(res.message);
					}
				});
		}
	}
};
</script>

<style lang="scss" scoped></style>
